<template>
  <div class="app-container box">
    <el-row>
      <el-col :span="24">
        <el-card shadow="never" :body-style="{height:'calc(100vh - 230px)'}">
          <el-col :span="24" class="count-text">
            <span ref="pre"></span><span ref="count">{{count}}</span><span ref="next"></span>
          </el-col>
          <el-col :span="24">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label="起始值">
                <el-input-number v-model="formInline.start"  :min="0"  label="描述文字"></el-input-number>
              </el-form-item>
              <el-form-item label="最终值">
                <el-input-number v-model="formInline.end"  :min="0"  label="描述文字"></el-input-number>
              </el-form-item>
              <el-form-item label="持续时间">
                <el-input-number v-model="formInline.sustain"  :min="0"  label="描述文字"></el-input-number>
              </el-form-item>
              <el-form-item label="小数位数">
                <el-input-number v-model="formInline.digit" :min="0" :max="10" label="描述文字"></el-input-number>
              </el-form-item>
              <el-form-item label="前缀" class="inp">
                <el-input v-model="formInline.pre" ></el-input>
              </el-form-item>
              <el-form-item label="后缀" class="inp">
                <el-input v-model="formInline.next" ></el-input>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="24" class="flex" style="margin-top: 20px">
            <el-button type="primary" size="medium" @click="begin()">开始</el-button>
          </el-col>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { CountUp } from '@/utils/countUp'
export default {
  name: 'count',
  data(){
      return {
        count:999,
        formInline: {
          start: 0,
          end: 999,
          sustain: 8000,
          digit: 0,
          pre:'',
          next:''
        },
        timer:null
  }
  },
  methods: {
    begin(){
      let options = {
        useEasing: true, // 使用缓和
        useGrouping: true, // 使用分组(是否显示千位分隔符,一般为 true)
        separator: ',', // 分隔器(千位分隔符,默认为',')
        decimal: '.', // 十进制(小数点符号,默认为 '.')
        prefix: '', // 字首(数字的前缀,根据需要可设为 $,¥,￥ 等)
        suffix: ''  // 后缀(数字的后缀 ,根据需要可设为 元,个,美元 等)
      };
      this.$refs.pre.innerText = this.formInline.pre
      this.$refs.next.innerText = this.formInline.next
      new CountUp(this.$refs.count,this.formInline.start,this.formInline.end,this.formInline.digit,this.formInline.sustain,options).start()
    },
  },
  mounted() {

  }
}
</script>

<style scoped lang="scss">
.box{
  .count-text{
    height: 80px;
    margin-bottom: 20px;
    font-size: 60px;
    font-weight: 700;
    text-align: center;
    background: linear-gradient(0deg,#77e0a0,#75c3e9);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .el-form-item{
    margin-right: 20px;
  }
  ::v-deep.el-form-item__content{
    width: 150px;
  }

  .inp{
    margin-right: 70px;
    ::v-deep.el-input{
      width: 200px;

    }
  }
  ::v-deep.el-form-item__label{
    font-weight: 400;
  }
}

</style>


